<template>
  <div id="app">
    <h2>这是 Vue2 测试页面</h2>
    <h4>姓名：{{ person.name }}</h4>
    <h4>年龄：{{ person.age }}</h4>
    <h4>兴趣爱好：{{ person.hobbies }}</h4>
    <h4 v-show="person.gender">性别：{{ person.gender }}</h4>
    <button @click="editHobbies">修改兴趣爱好</button>
    <button @click="addGender">添加性别</button>
    <button @click="deleteName">删除姓名</button>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'App',
  data() {
    return {
      person: {
        name: '张三',
        age: 88,
        hobbies: ['抽烟', '喝酒', '烫头']
      }
    }
  },
  methods: {
    editHobbies() {
      // Vue2 中对对象中数组直接进行修改也不会响应至页面
      // this.person.hobbies[0] = '吹水'
      // 需要通过 Vue 重写过的数组操作方法对数组进行操作才会响应至页面
      this.person.hobbies.splice(0,1, '吹水')
      console.log(this.person.hobbies)
    },
    addGender() {
      // Vue2 中对对象内直接添加属性，不会响应至页面，这个属性也不是响应式数据
      // this.gender = '男'
      // 需要使用 this.$set() 或者 Vue.set() 设置对属性才具备响应式
      Vue.set(this.person, 'gender', '男')
    },
    deleteName(){
      // Vue2 中对对象内直接删除属性，不会响应至页面
      //delete this.person.name
      // 需要使用 this.$delete() 或者 Vue.delete() 设置对属性进行删除才具备响应式
      this.$delete(this.person, 'name')
    }
  }
}
</script>

<style></style>
